XUL and HTML editors

As part of the shop design, I've specified a HTML editor, similar to fckeditor or htmlarea to edit the product descriptions and information pages. However, this editor has to be embedded into a XUL interface....

My main website (not the blog bit), has an "edit this page" link at the bottom, which already uses a HTML editor inside a XUL interface, but the code behind it more a proof of concept, rather than a production toolkit. So for the shop I decided to look at cleaning this up and making it modular..

XUL has a great mechanism for adding widgets like this, with a single stylesheet include, and an XML file you can create your own custom widgets.

In the XUL interface file (your main page that you want to use the widget on), you add this line

<?xml-stylesheet href="HtmlEdit.css" type="text/css"?>

(where HtmlEdit.css is our css file for our widget.)

Then somewhere in the body, you add

 <htmledit value="hello world" />  

(telling it to use your new custom widget.)

The CSS file is very simple..

htmledit 
{
            -moz-binding: url("HtmlEdit.xml#htmledit");
            max-height: 200px;
}

basically using the -moz-binding attribute to map the widget to an xml file (the #htmledit, pointing to a specific binding) - as the xml file could contain multiple widget binding (although I wouldnt recommend it)

Then your HtmlEdit.xml contains the <bindings> with <content> - the xul elements that make up your widget, and <implementation> with all the properties and methods that your widget has (with javascript for the methods) - if you use mozilla's lxr and search for "<bindings", it's easy to find examples.

Now all that stuff is quite simple ;) - what I had wanted was to turn my html editor into one of these.. Not quite so simple.. mozilla's design kind of make that less than easy..

• Mozilla has an <editor> tag, this however does not work on remote xul.. - so we have to use html:iframe, and set
  

  {iframeobject}.contentWindow.document.designMode = "on";

• html:iframe's dont appear to be useable inside of <bindings>
• even if you use the binding to append the html:iframe after it'self using DOM, you can not set the designMode, as the privaliges appear to prevent bindings doing stuff like that to the containing page.

In the end I suspect some kind of mix between a <script src="mylib.js"> and using the bindings to store the editor bar may be the best solution.. - But let's see how far I get ;)

[update] It turns out that it is feasible to put it all into a binding! - after a little hint on irc.mozilla.org#xul, I was able to create a HTMLIframeElement using importNode, and DomParser.